<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <div ref="info" class="map-chart"></div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import map from '@/assets/json/china.json'
import $ajax from '@/api/TianXing.js'

import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'
import { useGridStore } from '@/stores/grid/grid.js'
import { showErrorMsg } from '@/utils/alterMessage.js'
import { useMapDataStore } from '@/stores/statistics/mapData.js'

const gridStore = useGridStore()
const aqiFeedbackStore = useAqiFeedbackStore()
const mapDataStore = useMapDataStore()

const { proxy } = getCurrentInstance() //获取Vue3全局配置
const info = ref() //用来获取对应标签组件

onMounted(async () => {
  // console.log(map)
  await gridStore.loadData()
  const infoEl = info.value //获取ref="info"的标签组件
  const userEc = proxy.$echarts.init(infoEl) //proxy.$echarts是在获取全局配置中的echarts，这样就不需要在每个vue中import echarts了
  userEc.showLoading()
  const names = gridStore.grids.map((item) => item.gname)
  const gridData = await aqiFeedbackStore.getData(names)
  let formattedData = []
  let maxValue = 10

  if (gridData === null || gridData.length === 0) {
    showErrorMsg('暂无数据')
  } else {
    // console.log(gridData)
    mapDataStore.mapData = gridData
    formattedData = gridData.map((item) => ({
      name: item.gname,
      value: item.count
    }))
    maxValue = Math.max(...formattedData.map((item) => item.value))
  }

  userEc.hideLoading()
  // 注册地图(数据放在axios返回对象的data中哦)
  proxy.$echarts.registerMap('CHINA', map)
  var option = {
    title: {
      text: '全国AQI上报情况(/人次)',
      left: 'center',
      textStyle: {
        color: '#d3d3d8',
        fontSize: 20,
        fontWeight: 'bold'
      }
    },
    tooltip: {},
    series: [
      {
        name: 'AQI数据量',
        type: 'map',
        map: 'CHINA', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
        label: {
          show: true
        },
        roam: true,
        // zoom: 1.2
        data: formattedData
      }
    ],

    visualMap: {
      min: 0,
      max: maxValue,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      left: '5%',
      bottom: '8%',
      textStyle: {
        color: '#ffffff'
      },
      color: '#fff',
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    layoutCenter: ['50%', '68%'], //位置
    layoutSize: '120%', //大小
    aspectScale: 0.8 //宽高比
  }
  userEc.setOption(option) //将图标挂载到标签组件

  // 添加点击事件监听器
  userEc.on('click', function (params) {
    // console.log(params.name) // 输出点击事件的参数
    mapDataStore.currentLocation = params.name
    const path = '/aqi/index'
    $ajax
      .get(path, {
        params: {
          key: 'd9a888c90decb4dcf36d40226a57590a',
          area: params.name
        }
      })
      .then((res) => {
        if (res.code === 200) {
          const data = res.result
          let numbers = []
          numbers.push(data.aqi)
          numbers.push(data.pm2_5)
          numbers.push(data.pm10)
          numbers.push(data.co)
          numbers.push(data.no2)
          numbers.push(data.so2)
          mapDataStore.currentAqi = numbers
        } else {
          showErrorMsg('数据错误')
        }
      })
  })
})
</script>

<style lang="scss" scoped>
.map-chart {
  width: 750px;
  height: 450px;
  padding-top: 20px;
}
</style>
